import React, { memo, useState, useEffect } from 'react'
import { RightWrapper } from './style'

const HeaderRight = memo(() => {
  // 定义组件内部的状态
  const [showPanel, setshowPanel] = useState(false);

  // 副作用代码 , 处理点击头像区域打开下拉框
  useEffect(() => {
    function windowClickHandle() {
      setshowPanel(false);
    }
    window.addEventListener('click', windowClickHandle, true)
    return () => {
      window.removeEventListener('click', windowClickHandle, true)
    }
  }, [])


  // 事件处理函数
  function profileClickHandle() {
    setshowPanel(true);
  }

  return (
    <RightWrapper>
      <div className="btns">
        <span className='btn'>登录</span>
        <span className='btn'>注册</span>
        <span className='btn'>图标</span>
      </div>
      <div className="profile" onClick={profileClickHandle}>
        <span>菜单</span>
        <span>头像</span>

        {showPanel && (
          <div className="panel">
            <div className="top">
              <div className="item register">注册</div>
              <div className="item login">登录</div>
            </div>
            <div className="bottom">
              <div className="item register">出租房源</div>
              <div className="item login">开展体验</div>
              <div className="item login">帮助</div>
            </div>
          </div>
        )}
      </div>
    </RightWrapper>
  )
})

export default HeaderRight